<template>
  <div class="songdetail-container">
    <el-drawer :visible.sync="isShow" :direction="direction" :modal="false" :withHeader="false"
      :modal-append-to-body="false" :wrapperClosable="false" size="100%" style="z-index=1000" @closed="songDetailClosed"
      @open="openSongView" @opened="openedSongView"> <i @click="closeSongView" class="el-icon-arrow-down"></i>

      <div class="songdetail-content" :style="{ 'justify-content': !isShowRight ? 'center' : 'space-between' }">
        <div class="songdetail-left">
          <div class="round">
            <img class="diepianjigan" src="@/assets/images/网易云碟片机杆.png"
              :style="{ 'transform': 'rotate(' + deg + 'deg)' }">
            <img v-if="audioInfo.al" class="songImg" :src="audioInfo.al.picUrl"
              :style="{ 'animation-play-state': deg == 37 ? 'running' : 'paused' }">
          </div>
        </div>
        <div class="songdetail-center">
          <!-- 歌曲信息区域 -->
          <div class="songdetail-title">
            <h1 v-html="audioInfo.name"></h1>
            <p v-if="audioInfo.alias && audioInfo.alias.length > 0" v-html="audioInfo.alias[0]"></p>
            <p class="musicAlia" v-if="audioInfo.alia && audioInfo.alia.length > 0" v-html="audioInfo.alia[0]">
            </p>
            <div class="arinfo"><span v-if="audioInfo.artists" class="arname"
                @click="$router.push('/artists/' + audioInfo.artists[0].id)">{{
                audioInfo.artists[0].name
                }}</span><span v-if="audioInfo.ar" class="arname"
                @click="$router.push('/artists/' + audioInfo.ar[0].id)"
                v-html="audioInfo.ar[0].name"></span><i>-</i><span class="alname" v-if="audioInfo.al.name"
                @click="$router.push('/playlists/' + audioInfo.al.id)" v-html="audioInfo.al.name"></span></div>
          </div>

          <!-- 歌词展示区域 -->
          <div class="songtext" ref="songtext">
            <ul class="infinite-list" ref="ul" @wheel="mouseWheel" @mousedown="mouseDown" @mouseup="mouseUp">
              <li :class="{ 
                'finally': (index == songTxt.length - 1 && isFinally) || (index == 0 && isFirst), 
                'active': flag && (currentTime >= item.time.slice(0, 5) && currentTime < songTxt[((index + 1) > songTxt.length - 1 ? songTxt.length - 1 : index + 1)].time.slice(0, 5)) 
              }" v-for="(item, index) in songTxt" :key="index" :ref="index" @dblclick="dblclickSongTxt(item)">
                <p class="lrc">{{ item.lrc }}</p>
                <span class="romalrc" v-show="isYin == 'romalrc' && item.romalrc">({{ item.romalrc }})</span>
                <span class="tlyric" v-show="isYin == 'tlyric' && item.tlyric">[{{ item.tlyric }}]</span>
              </li>
            </ul>
            <div class="tslate">
              <span @click="changeRomalrc" v-if="romalrc.length > 0" :class="{ 'select': isYin == 'romalrc' }">音</span>
              <span @click="changetlyric" v-if="tlyric.length > 0" :class="{ 'select': isYin == 'tlyric' }">译</span>
            </div>
          </div>
        </div>
        <div v-show="isShowRight" class="songdetail-right">
          <!-- 评论区域 -->
          <div class="comment-box">
            <!-- 评论列表区域 -->
            <div class="comment-list">
              <h4 :class="{ 'currtTitle': isTitle }" @click="isTitle = true">全部评论({{ totals }})</h4>
              <h4 :class="{ 'currtTitle': !isTitle }" @click="isTitle = false">热门评论({{ hotComments.length }})</h4>
              <div class="comment-list-item" ref="comment">
                <div class="conment-item" v-for="item in currtComment" :key="item.commentId">
                  <img class="useravatar" :src="item.user.avatarUrl" @click="goToProfiles(item)">
                  <div class="content">
                    <div class="list">
                      <p><span @click="goToProfiles(item)">{{
                      item.user.nickname
                      }}：</span>{{ item.content }}</p>
                    </div>
                    <div v-if="item.beReplied && item.beReplied.length > 0" class="answer"><span @click="goToUser(item)"
                        class="userNickname">@{{
                        item.beReplied[0].user.nickname
                        }}：</span>
                      <span>{{ item.beReplied[0].content }}</span>
                    </div>
                    <span class="time">{{ item.timeStr }}</span>
                  </div>
                  <div class="content-btn">
                    <span @click="dianzan(item)"
                      :class="{ 'iconfont': true, 'icon-dianzan': true, 'active': item.liked }"><i
                        v-show="item.likedCount">{{ item.likedCount }}</i></span>
                    <span @click="pinglun(item)" class="iconfont icon-pinglun"></span>
                  </div>
                </div>

                <!-- 分页器区域 " -->
                <div v-if="currtComment.length >= 20" class="fenye">
                  <el-pagination background layout="prev, pager, next" :current-page="page" :page-size="limit"
                    :total="totals" @current-change="handleCurrentChange">
                  </el-pagination>
                </div>
              </div>
            </div>
            <!-- 评论框区域 -->
            <div class="comment-text" v-if="isShowComment">
              <textarea class="text" v-model="contentList" @keyup.enter="postComment"
                :placeholder="placeholder"></textarea>
              <i class="el-icon-close" @click="isShowComment = false; contentList = ''"></i>
            </div>
            <button v-else class="comment-btn" @click="goComment"><i class="el-icon-edit"></i>发表我的音乐评论</button>
          </div>
          <!-- 评论区域 -->
        </div>
        <div class="showBtn">
          <span v-show="isShowRight" class="el-icon-d-arrow-right" @click="isShowRight = false"></span>
          <span v-show="!isShowRight" class="el-icon-d-arrow-left" @click="isShowRight = true"></span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    audioInfo: {
      type: Object,
      default: {}
    },
    deg: {
      type: Number,
      default: 0
    },
    currentTime: {
      type: String,
      default: '00:00'
    },
    flag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      direction: 'btt',
      // 原词（未翻译）
      lrc: [],
      // 罗马音
      romalrc: [],
      // 中文翻译
      tlyric: [],
      timer: null,
      isShowRight: true,
      isYin: 'tlyric',
      page: 1,
      limit: 20,
      totals: 0,
      comments: [],
      hotComments: [],
      currtComment: [],
      contentList: '',
      isShowComment: false,
      isTitle: true,
      t: 1,
      placeholder: '',
      commentId: '',
      isScroll: true,
      scrollTimer: null
    }
  },
  watch: {
    currentTime: {
      handler() {
        this.$nextTick(() => {
          this.scrollUl()
        })
      },
      immediate: true
    },
    isTitle: {
      handler(newTitle, oldTitle) {
        if (newTitle) {
          this.currtComment = this.comments
        } else {
          this.currtComment = this.hotComments
        }
      },
      immediate: true
    }
  },
  computed: {
    songTxt() {
      if (this.lrc.length < 1) return []
      const songArr = this.lrc.filter(item => item.time != '-1' && item.lrc)
      songArr.forEach(item => {
        this.romalrc.some(rom => {
          if (item.time.slice(0, 8) == rom.time.slice(0, 8)) {
            item.romalrc = rom.romalrc
            return true
          }
        })
        this.tlyric.some(tly => {
          if (item.time.slice(0, 8) == tly.time.slice(0, 8)) {
            item.tlyric = tly.tlyric
            return true
          }
        })
      })
      return songArr
      // return this.lrc || []
    },
    isFinally() {
      return this.currentTime >= this.songTxt[this.songTxt.length - 1].time.slice(0, 5)
    },
    isFirst() {
      return this.currentTime <= this.songTxt[0].time.slice(0, 5)
    }
  },
  methods: {
    mouseDown() {
      this.isScroll = false
    },
    mouseUp() {
      this.mouseWheel()
    },
    // 歌词列表鼠标滚动事件
    mouseWheel() {
      clearTimeout(this.scrollTimer)
      clearInterval(this.timer)
      this.isScroll = false
      this.scrollTimer = setTimeout(() => {
        this.isScroll = true
        this.scrollUl(this.isScroll)
      }, 1000)
    },
    scrollUl(up) {
      this.$nextTick(() => {
        if (this.songTxt.length < 5 || !this.flag || !this.isScroll) return
        this.songTxt.some((item, index) => {
          if (item.time.slice(0, 5) == this.currentTime && !this.isFirst && !this.isFinally) {
            const h = this.$refs.songtext.offsetHeight / 2 - this.$refs[index][0].offsetHeight / 2
            const s = this.$refs[index][0].offsetTop - h
            this.animate(this.$refs.ul, s)
            return true
          } else if (this.songTxt.length >= 5 && up && item.time && item.time.slice(0, 5) < this.currentTime && this.songTxt[index + 1].time.slice(0, 5) > this.currentTime && !this.isFirst && !this.isFinally) {
            const h = this.$refs.songtext.offsetHeight / 2 - this.$refs[index][0].offsetHeight / 2
            const s = this.$refs[index][0].offsetTop - h
            this.animate(this.$refs.ul, s)
            return true
          } else if (this.isFinally) {
            const maxScroll = this.$refs.ul.scrollHeight - this.$refs.songtext.offsetHeight
            this.animate(this.$refs.ul, maxScroll)
            return true
          } else if (this.isFirst) {
            this.animate(this.$refs.ul, 0)
            return true
          }
        })
      })
    },
    animate(obj, target, callback) {
      if (!obj) return
      target = target <= 0 ? 0 : target
      target = target >= obj.scrollHeight ? obj.scrollHeight - this.$refs.songtext.offsetHeight : target
      clearInterval(this.timer)
      this.timer = null
      this.timer = setInterval(() => {
        var step = (target - obj.scrollTop) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        obj.scrollTop = obj.scrollTop + step
        if ((obj.scrollTop >= target && step >= 0) || (obj.scrollTop <= target && step <= 0)) {
          clearInterval(this.timer)
        }
      }, 30)
    },
    // 关闭动画结束时的回调
    songDetailClosed() {
      clearInterval(this.timer)
    },
    // 关闭歌曲详情窗口
    closeSongView() {
      this.$emit('closeView')
    },
    // 歌曲详情窗口打开的回调，获取歌词信息
    async openSongView(songId, isLoading = false) {
      const Id = songId || this.audioInfo.id
      this.lrc = []
      this.romalrc = []
      this.tlyric = []
      const reg = /\[(.+?)\]/
      const { data: res } = await axios.get(`/lyric?id=${Id}`, isLoading)
      if (res.code == 200) {
        this.lrc = res.lrc.lyric.split('\n').map(item => {
          if (item) {
            const time = reg.exec(item) || ['1', '-1']
            const start = item.indexOf(']') + 1
            return {
              time: time[1],
              lrc: item.slice(start),
              romalrc: '',
              tlyric: ''
            }
          } else {
            return {
              time: '-1'
            }
          }
        })
        if (res.romalrc && res.romalrc.lyric) {
          this.romalrc = res.romalrc.lyric.split('\n').map(item => {
            if (item) {
              const time = reg.exec(item)
              const start = item.indexOf(']') + 1
              return {
                time: time[1],
                romalrc: item.slice(start)
              }
            } else {
              return {
                time: '-1'
              }
            }
          })
        }
        if (res.tlyric && res.tlyric.lyric) {
          this.tlyric = res.tlyric.lyric.split('\n').map(item => {
            if (item) {
              const time = reg.exec(item)
              const start = item.indexOf(']') + 1
              return {
                time: time[1],
                tlyric: item.slice(start)
              }
            } else {
              return {
                time: '-1'
              }
            }
          })
        }
      }
    },
    // 歌曲详情窗口打开动画结束的回调
    openedSongView() {
      this.isYin = 'tlyric'
      const up = true
      this.scrollUl(up)
      this.getSongComments()
    },
    // 双击歌词跳转到对应时间点
    dblclickSongTxt(item) {
      clearTimeout(this.scrollTimer)
      this.isScroll = true
      this.$emit('dblclickTxt', item.time.slice(0, 5))
    },
    // 获取歌曲评论信息
    async getSongComments(id, isLoading = false) {
      const songId = id || this.audioInfo.id
      const { data: res } = await axios.get(`/comment/music?id=${songId}&limit=${this.limit}`, isLoading)
      if (res.code == 200) {
        this.currtComment = res.comments
        this.comments = res.comments
        this.hotComments = res.hotComments
        this.totals = res.total
      }
    },
    // 分页器页码变化处理函数
    async handleCurrentChange(page) {
      const { data: res } = await axios.get(`/comment/music?id=${this.audioInfo.id}&limit=${this.limit}&offset=${page}`)
      if (this.isTitle && res.code == 200) {
        this.currtComment = res.comments
        this.comments = res.comments
        this.$refs.comment.scrollTop = 0
      }
    },
    // 评论按钮显示输入框
    goComment() {
      this.isShowComment = true
      this.placeholder = ''
    },
    // 评论框按下回车事件
    async postComment() {
      if (this.contentList.trim() == '') return this.$message.warning('请输入评论内容')
      const reg = /^回复/
      if (reg.test(this.placeholder)) {
        this.t = 2
        this.url = `/comment?t=${this.t}&type=0&id=${this.audioInfo.id}&content=${this.contentList}&commentId=${this.commentId}`
      } else {
        this.t = 1
        this.url = `/comment?t=${this.t}&type=0&id=${this.audioInfo.id}&content=${this.contentList}`
      }
      const { data: res } = await axios.post(this.url)
      if (res.code == 200) {
        if ((this.t = 1)) {
          this.$message.success('评论成功!')
        } else {
          this.$message.success('回复成功!')
          this.placeholder = ''
        }
        this.contentList = ''
        this.page = 1
        this.getSongComments()
      }
    },
    // 回复按钮
    pinglun(item) {
      this.isShowComment = true
      this.placeholder = '回复' + item.user.nickname + ': '
      this.commentId = item.commentId
    },
    // 点赞按钮
    async dianzan(item) {
      if (item.liked) {
        const { data: res1 } = await axios.post(`/comment/like?id=${this.audioInfo.id}&cid=${item.commentId}&t=0&type=0`)
        if (res1.code == 200) {
          this.$message.success('取消点赞成功')
          this.getSongComments()
        }
      } else {
        const { data: res2 } = await axios.post(`/comment/like?id=${this.audioInfo.id}&cid=${item.commentId}&t=1&type=0`)
        if (res2.code == 200) {
          this.$message.success('点赞成功')
          this.getSongComments()
        }
      }
    },
    // 关闭歌词窗口并跳转到用户详情页面
    goToProfiles(item) {
      this.$router.push('/userprofiles/' + item.user.userId)
      this.$emit('closeView')
    },
    // 关闭歌词窗口并跳转到用户详情页面
    goToUser(item) {
      this.$router.push('/userprofiles/' + item.beReplied[0].user.userId)
      this.$emit('closeView')
    },
    // 切换歌词成音译
    changeRomalrc() {
      if (this.isYin == 'romalrc') {
        this.isYin = 'lrc'
      } else {
        this.isYin = 'romalrc'
      }
      this.$nextTick(() => {
        this.scrollUl(this.isYin)
      })
    },
    // 切换歌词成翻译
    changetlyric() {
      if (this.isYin == 'tlyric') {
        this.isYin = 'lrc'
      } else {
        this.isYin = 'tlyric'
      }
      this.$nextTick(() => {
        this.scrollUl(this.isYin)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.songdetail-container {
  position: relative;

  .el-icon-arrow-down {
    position: absolute;
    top: 2%;
    left: 6.35%;
    z-index: 1001;
    font-size: 33px;
  }

  .songdetail-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .songdetail-left {
      position: relative;
      width: 30%;
      height: 100%;

      // background-color: pink;
      .round {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.7);
        border: 12px solid rgba(255, 255, 255, 0.6);

        .diepianjigan {
          position: absolute;
          left: 50%;
          top: -90px;
          transform-origin: 11px 11px;
          transition: all 0.5s;
        }

        .songImg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 200px;
          border-radius: 50%;
          // background-color: #fff;
          overflow: hidden;
          transform-origin: center center;
          animation: songImgRound 60s linear 0.5s infinite;

          @keyframes songImgRound {
            from {
              transform: translate(-50%, -50%) rotate(0);
            }

            to {
              transform: translate(-50%, -50%) rotate(360deg);
            }
          }
        }
      }
    }

    .songdetail-center {
      width: 30%;
      height: 100%;
      padding: 0 30px;

      .songdetail-title {
        position: absolute;
        left: 50%;
        top: 0;
        width: 30%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 20%;
        cursor: default;

        h1 {
          width: 100%;
          margin-bottom: 0;
          font-weight: 400;
          font-size: 1.8vw;
          min-height: 40px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgb(19, 18, 18);

          /deep/ i {
            color: rgb(19, 18, 18) !important;
          }
        }

        .musicAlia {
          margin-top: 10px;

          /deep/ i {
            color: rgb(130, 130, 130) !important;
          }
        }

        p {
          width: 80%;
          margin-bottom: 0;
          font-size: 20px;
          min-height: 20px;
          color: rgb(130, 130, 130);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .arinfo {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          min-height: 20px;
          margin-top: 10px;
          color: rgb(130, 130, 130);
          white-space: nowrap;

          .arname {
            height: 26px;
            line-height: 26px;

            /deep/ i {
              color: rgb(130, 130, 130) !important;

              &:hover {
                color: rgb(46, 120, 195) !important;
              }
            }

            &:hover {
              color: rgb(46, 120, 195);
            }
          }

          i {
            margin: 0 3px;
          }

          .alname {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 26px;

            /deep/ i {
              color: rgb(130, 130, 130) !important;

              &:hover {
                color: rgb(46, 120, 195) !important;
              }
            }

            &:hover {
              color: rgb(46, 120, 195);
            }
          }
        }
      }

      .songtext {
        position: relative;
        height: 65%;
        overflow: hidden;
        margin-top: 30%;
        cursor: default;
        border-radius: 8px;
        transition: all 0.5s;

        &:hover {
          background-color: rgba(255, 255, 255, 0.5);
        }

        // padding-bottom: 20px;

        // 歌词区域------------------------------------------------------------------------------------------------------------歌词区域
        .infinite-list {
          position: relative;
          list-style: none;
          padding: 0;
          height: 100%;
          padding: 0 6px;
          overflow-y: overlay;

          &::-webkit-scrollbar {
            float: right;
            width: 0;
          }

          &:hover {
            &::-webkit-scrollbar {
              float: right;
              width: 6px;
            }
          }

          // background-color: rgb(94, 207, 88);
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 30px 0;

            &.active {
              .lrc {
                color: rgb(102, 55, 179);
                font-size: 23px;
                font-weight: 600;
              }

              span {
                font-size: 17px;
              }

              .romalrc {
                color: rgb(51, 100, 207);
              }

              .tlyric {
                color: rgb(216, 107, 44);
              }
            }

            &.finally {
              .lrc {
                color: rgb(102, 55, 179);
                font-size: 23px;
                font-weight: 600;
              }

              span {
                font-size: 17px;
              }

              .romalrc {
                color: rgb(51, 100, 207);
              }

              .tlyric {
                color: rgb(216, 107, 44);
              }
            }

            .lrc {
              font-size: 20px;
              font-weight: 400;
              color: rgb(48, 87, 214);
              margin: 5px 0;
              transition: all 0.5s;
            }

            span {
              font-size: 16px;
              color: rgb(48, 87, 214);
              transition: all 0.5s;
            }
          }
        }

        .tslate {
          position: absolute;
          right: 6px;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          span {
            box-sizing: border-box;
            margin-top: 3px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            font-size: 14px;
            color: rgb(150, 149, 149);
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.5);

            &.select {
              background-color: rgba(255, 255, 255, 0.8);

              color: rgb(0, 0, 0);
            }

            &:hover {
              background-color: rgba(255, 255, 255, 0.8);

              color: rgb(0, 0, 0);
            }
          }
        }
      }
    }

    .songdetail-right {
      position: relative;
      width: 30%;
      height: 90%;
      box-sizing: border-box;
      transition: all 1s;
      padding: 10px 30px;
      cursor: default;


      // 评论区域
      .comment-box {
        padding: 10px 0;
        width: 100%;
        height: 100%;

        .comment-text {
          display: flex;
          position: relative;
          justify-content: center;
          width: 100%;
          height: 10%;
          margin-top: 10px;

          .el-icon-close {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 18px;
          }

          .text {
            width: 100%;
            height: 70px;
            outline: none;
            border: 1px solid rgb(199, 199, 199);
            border-radius: 5px;
            resize: none;
            font-size: 14px;
          }
        }

        .comment-list {
          width: 100%;
          height: 88%;
          position: relative;
          text-align: start;

          h4 {
            display: inline-block;
            margin: 0;
            margin-bottom: 20px;
            margin-left: 25px;
            font-size: 15px;
            font-weight: 400;
            cursor: default;

            &.currtTitle {
              font-weight: 700;
              font-size: 17px;
            }
          }

          .comment-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            position: relative;
            width: 100%;
            height: 100%;
            overflow-y: overlay;

            &::-webkit-scrollbar {
              width: 0;
            }

            .conment-item {
              display: flex;
              // align-items: center;
              position: relative;
              width: 100%;
              margin-top: 10px;
              padding: 15px 0;
              // border-bottom: 1px solid rgb(227, 227, 227);
              font-size: 13px;

              .content-btn {
                display: flex;
                align-items: center;
                position: absolute;
                right: 10px;
                bottom: 5px;
                text-align: center;

                .icon-pinglun {
                  font-size: 16px;
                  padding: 0 10px;
                  color: #fff;

                  &:hover {
                    font-weight: 700;
                  }
                }

                .icon-dianzan {
                  // display: flex;
                  // align-items: center;
                  font-size: 21px;
                  padding: 0 10px;
                  color: #fff;

                  i {
                    font-style: normal;
                    font-size: 14px;
                    color: #fff;
                  }

                  &:hover {
                    font-weight: 700;
                  }

                  &.active {
                    color: #c00000;
                    font-weight: 700;
                  }
                }
              }

              .useravatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                margin-right: 20px;
                // background-color: pink;
              }

              .content {
                display: flex;
                flex-direction: column;

                .list {
                  margin-bottom: 10px;

                  p {
                    margin: 0;
                    word-break: break-all;
                    word-wrap: break-word;

                    span {
                      color: #4680d1;
                      font-size: 14px;
                    }
                  }
                }

                span {
                  color: rgb(95, 95, 95);
                }

                .answer {
                  background-color: rgba(255, 255, 255, 0.5);
                  margin: 0;
                  padding: 5px;
                  margin-left: 10px;
                  margin-bottom: 10px;
                  border-radius: 4px;
                  word-break: break-all;
                  word-wrap: break-word;

                  .userNickname {
                    color: #4680d1;
                    font-size: 14px;
                  }
                }
              }
            }

            .fenye {
              margin-top: 20px !important;
              margin-bottom: 35px;
            }
          }
        }

        .comment-btn {
          position: absolute;
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%);
          border: none;
          outline: none;
          height: 40px;
          padding: 0 15px;
          border-radius: 20px;
          z-index: 1023;
          transition: all 0.5s;

          background-color: rgba(255, 255, 255, 0.5);

          &:hover {
            background-color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }

    .showBtn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1020;

      span {
        font-size: 20px;
        width: 22px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 0.5);

        &:hover {
          background-color: rgba(255, 255, 255, 0.8);

        }
      }
    }
  }

  /deep/ .el-drawer__wrapper {
    top: 0 !important;
    bottom: 0 !important;
    z-index: 2000 !important;

    .el-drawer__body {
      background: url(@/assets/images/sakura.png) no-repeat center;
      background-size: 100% 100%;
      filter: brightness(95%);
    }
  }
}
</style>